<template>
	<view class="con">
		<view class="lsit">
			<view class="lsit_left">真实姓名</view>
			<input class="lsit_right" type="text" placeholder="输入您的真实姓名..." v-model="name" />
		</view>
		<view class="lsit">
			<view class="lsit_left">身份证号</view>
			<input class="lsit_right" type="text" placeholder="输入您的身份证号码..." v-model="idcard" />
		</view>
		<view class="lsit">
			<view class="lsit_left">手机号码</view>
			<input class="lsit_right" type="text" placeholder="输入您的手机号码..." v-model="phone" />
		</view>
		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_right" @click="submit">确认保存</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let type = ref(0)
	let id = ref(0)
	let name = ref('')
	let idcard = ref('')
	let phone = ref('')

	const indexlist = () => {
		http.post('/srapi/wode/edit_address', { id: id.value }).then((res) => {
			console.log('返回值', res)
			name.value = res.data.name
			idcard.value = res.data.idcard
			phone.value = res.data.phone
		})
	}
	const submit = () => {
		// uni.navigateBack()
		if (
			validateFields([
				{
					value: name.value,
					message: '请输入您的真实姓名'
				},
				{
					value: idcard.value,
					message: '请输入您的身份证号码'
				},
				{
					value: idcard.value.length == 18,
					message: '身份证号码错误'
				},
				{
					value: phone.value,
					message: '请输入您的手机号码'
				},
				{
					value: phone.value.length == 11,
					message: '手机号码错误'
				}
			])
		) {
			return
		}

		if (type.value == 1) {
			http
				.post('/srapi/wode/add', {
					name: name.value,
					idcard: idcard.value,
					phone: phone.value
				})
				.then((res) => {
					console.log('返回值', res)
					uni.showToast({
						mask: true,
						title: res.msg,
						icon: 'none',
						duration: 500
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
		} else {
			http
				.post('/srapi/wode/edit_add', {
					id: id.value,
					name: name.value,
					idcard: idcard.value,
					phone: phone.value
				})
				.then((res) => {
					console.log('返回值', res)
					uni.showToast({
						mask: true,
						title: res.msg,
						icon: 'none',
						duration: 500
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
		}
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		type.value = +option.type
		id.value = +option.id

		switch (type.value) {
			case 1:
				uni.setNavigationBarTitle({
					title: '添加入住人'
				})
				break
			case 2:
				uni.setNavigationBarTitle({
					title: '编辑入住人'
				})
				indexlist()
				break
			default:
				break
		}
	})
	// 触底
	onReachBottom(() => {
		// if (listtype.value) {
		// page.value += 1
		// indexlist()
		// }
	})
</script>

<style lang="less" scoped>
	.con {
		padding: 25rpx 30rpx;
	}

	.lsit {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 18rpx;
		.lsit_left {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
			margin-right: 60rpx;
		}
		.lsit_right {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: #787878;
		}
	}

	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}

	//
</style>
